<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { GetDetailData, PostSenddrawchanceData, PutModifyData } from '@/api/modules/subscribermsgtemple'
import detailStore from '@/store/modules/cacheData'

const router = useRouter()
const route = useRoute()
const detailData = detailStore()

// const imgDomain = 'https://img1.eprhan.cc'

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({
  wxTemplateId: '',
  wxTemplateTitle: '',
  templateIcon: '',
  linkUrl: '',
  content1: '',
  content2: '',
  content3: '',
  content4: '',
  templateKeywords: [],
  enable: true,
  templateType: 4,
})

const templateTypeOptionList = ref([
  // {
  //   value: 1,
  //   label: '抽奖活动',
  // },
  // {
  //   value: 2,
  //   label: '积分商城秒杀开始',
  // },
  // {
  //   value: 3,
  //   label: '超级会员日秒杀开始',
  // },
  // {
  //   value: 4,
  //   label: '花开星期五秒杀开始',
  // },
  // {
  //   value: 5,
  //   label: '零元试用',
  // },
  {
    value: 4,
    label: '积分商城秒杀',
  },
  {
    value: 5,
    label: '超级会员日秒杀',
  },
  {
    value: 6,
    label: '花开星期五秒杀',
  },
  {
    value: 7,
    label: '0元试用开始',
  },
  { value: 8, label: '0元试用上新' },
  { value: 9, label: '抽奖' },
  { value: 12, label: '积分过期提醒' },
  { value: 13, label: '福卡助力成功通知' },
  { value: 14, label: '福卡开奖提醒' },
  { value: 16, label: '拼团进度提醒' },
])

const id = route.query.id as string

// 提交
async function SubmitData() {
  const params = { ...ruleForm.value }
  params.templateKeywords = ruleForm.value.templateKeywords.join(',')
  if (id) {
    // 编辑
    params.dingyueTemplateId = id
    PutModifyData(params).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('编辑成功')
        router.push({ name: 'subscribermsgtempleIndex' })
      }
    })
  }
  else {
    // 添加
    PostSenddrawchanceData(params).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('添加成功')
        detailData.EmptySubscribermsgtemple()
        router.push({ name: 'subscribermsgtempleIndex' })
      }
    })
  }
}

const ContentList = ref<number[]>([])

function AddContent() {
  if (ContentList.value.length !== 4) {
    ContentList.value.push(ContentList.value.length + 1)
  }
}

// 图片上传回调
function handleUploadSuccess(url: string) {
  if (url) {
    ruleForm.value.templateIcon = url
  }
}

watch(ruleForm, (newValue) => {
  if (!id) {
    detailData.RememberSubscribermsgtemple(newValue)
  }
}, { deep: true })

onMounted(async () => {
  if (id) {
    await GetDetailData(id).then(async (res: any) => {
      if (res.statusCode === 200) {
        ruleForm.value = res.data
        ruleForm.value.templateKeywords = ruleForm.value.templateKeywords.split(',')
        for (let i = 1; i <= 4; i++) {
          if (res.data[`content${i}`]) {
            ContentList.value.push(i)
          }
        }
      }
    })
  }
  else {
    ruleForm.value = detailData.GetSubscribermsgtempleData()
    for (let i = 1; i <= 4; i++) {
      if (ruleForm.value[`content${i}`]) {
        ContentList.value.push(i)
      }
    }
  }
})
</script>

<template>
  <div>
    <PageHeader :title="id ? '编辑' : '添加'" />
    <ElForm ref="ruleFormRef" label-position="top" label-width="80px" :model="ruleForm">
      <PageMain title="基础信息">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="模板标题">
              <el-input v-model="ruleForm.wxTemplateTitle" style="width: 300px;" placeholder="请输入模板标题" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="模板类型">
              <el-select v-model="ruleForm.templateType" placeholder="请选择模板类型" style="width: 300px;" clearable>
                <el-option v-for="items in templateTypeOptionList" :key="items.value" :label="items.label" :value="items.value" />
              </el-select>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="是否启用">
              <el-switch
                v-model="ruleForm.enable"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="模板ID">
              <el-input v-model="ruleForm.wxTemplateId" placeholder="请输入模板ID" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="跳转小程序地址">
              <el-input v-model="ruleForm.linkUrl" placeholder="请输入小程序地址" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="模板图标">
              <ImageUpload
                :size="1" width="auto" :height="150" :url="ruleForm.templateIcon" :ext="['png', 'jpg']"
                @on-success="(imgUrl) => handleUploadSuccess(imgUrl)"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="发送文案">
        <div>
          <el-button type="success" class="mb-5" :disabled="ContentList.length === 4" @click="AddContent">
            新增
          </el-button>
        </div>
        <ElRow :gutter="20">
          <ElCol v-for="(item, index) in ContentList" :key="item" :md="12">
            <ElFormItem label="">
              <div style="display: flex; width: 100%;">
                <el-input v-model="ruleForm.templateKeywords[index]" :placeholder="`请输入模板关键词${item}`" style="max-width: 200px; margin-right: 10px;" />
                <el-input v-model="ruleForm[`content${item}`]" :placeholder="`请输入发送文案${item}`" />
              </div>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 80px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData()">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style lang="scss" scoped>
.box {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}

.card-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
</style>
